<template>
    <OADialog title="提示" @submit="onDelete" v-model="dialogVisib">
        <span>你确定要删除这条通知吗?</span>
    </OADialog>
    <OAMain title="通知列表">
        <el-table :data="informs">
            <el-table-column prop="title" label="标题" width="180">
                <template #default="scope">
                    <el-badge v-if="scope.row.reads.length==0" is-dot class="item">
                    <RouterLink :to="{ name: 'informdetail', params: { pk: scope.row.id } }">
                        {{ scope.row.title }}
                    </RouterLink>
                    </el-badge>
                    <RouterLink v-else :to="{ name: 'informdetail', params: { pk: scope.row.id } }">
                        {{ scope.row.title }}
                    </RouterLink>
                </template>
            </el-table-column>
            <el-table-column label="发布者" width="180">
                <template #default="scope">
                    {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
                </template>
            </el-table-column>
            <el-table-column label="发布时间">
                <template #default="scope">
                    {{ dateformat.stringFromDateTime(scope.row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column label="部门可见">
                <template #default="scope">
                    <el-tag v-if="scope.row.public" type="success">全员可见</el-tag>
                    <el-tag v-else v-for="department_ in scope.row.department" :key="department_.name" type="info">{{
                        department_.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template #default="scope">
                    <el-button v-if="scope.row.author.uid == AuthStore.user.uid" @click="onShowDialog(scope.$index)"
                        type="danger" icon="Delete" />
                    <el-button v-else disable type="default">无</el-button>
                </template>
            </el-table-column>


        </el-table>
        <OAPagination :total="pagination.total" v-model="pagination.page"></OAPagination>

    </OAMain>
</template>

<script setup name="informList">
import { ref, reactive, onMounted } from 'vue'
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';
import dateformat from '@/utils/dateformat';
import { useAuthStore } from '@/stores/auth';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';
let informs = ref([]);
let AuthStore = useAuthStore();
let pagination = reactive({
    page: 1,
    total: 0
})




onMounted(async () => {
    try {
        let data = await informHttp.getInformList(1)
        pagination.total = data.count
        informs.value = data.results

    } catch (detail) {
        ElMessage.error(detail)
    }
})
let handleIndex = ref()
const dialogVisib = ref(false)
const onShowDialog = (index) => {
    handleIndex = index
    dialogVisib.value = true
}
const onDelete = async () => {
    try {
        let inform = informs.value[handleIndex]
        await informHttp.deleteInform(inform.id)
        informs.value.splice(handleIndex, 1)
        dialogVisib.value=false
        ElMessage.success('删除成功')
    } catch (detail) {
        ElMessage.error(detail)
    }
}
</script>

<style scoped>
.el-tag {
    margin-right: 5px;
}
.el-bage {
    margin-right: 5px;
}
</style>